<!-- 组件 - 《小程序隐私协议》弹窗提示器 -->
<!-- https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html -->
<!-- https://developers.weixin.qq.com/community/develop/article/doc/000cec45360938d3993046b3f66813 -->
<template>
	<uni-transition mode-class="fade" custom-class="dlg-privacy-mask" :show="dlgPrivacyShow" catchtap="">
		<view class="dlg-privacy-content-box" @click.stop="">
			<view class="title">沃客薪服</view>
			<view class="content">
				<span>{{'在你使用【沃客薪服】服务之前，请仔细阅读'}}</span>
				<span class="link" @click="handleViewPrivacy">{{'《沃客薪服隐私保护指引》'}}</span>
				<span>{{'。如你同意《沃客薪服隐私保护指引》，请点击“同意”开始使用【沃客薪服】。'}}</span>
			</view>
			<view class="btn">
				<!-- <button id="agree-btn" open-type="agreePrivacyAuthorization"
					bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button> -->
				<button id="agree-btn" open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>

			</view>
		</view>
	</uni-transition>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		data() {
			return {
				dlgPrivacyShow: false, // 弹窗显隐
			}
		},
		created() {
			// 查询微信侧记录的用户是否有待同意的隐私政策信息
			wx.getPrivacySetting({
				success: res => {
					// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
					console.log(res)
					if (res.needAuthorization) {
						// 需要弹出隐私协议
						console.log("需要弹出隐私协议")
						this.dlgPrivacyShow = true;
					} else {
						// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
						// wx.getUserProfile()
						// wx.chooseMedia()
						// wx.getClipboardData()
						// wx.startRecord()
					}
				},
				fail: () => {},
				complete: () => {}
			})
		},
		methods: {
			// 查看小程序隐私协议
			handleViewPrivacy() {
				// 打开隐私协议页面
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			},
			// 同意隐私协议
			handleAgreePrivacyAuthorization() {
				// 用户同意隐私协议事件回调
				// 用户点击了同意，之后所有已声明过的隐私接口和组件都可以调用了
				// wx.getUserProfile()
				// wx.chooseMedia()
				// wx.getClipboardData()
				// wx.startRecord()
				console.log("用户同意隐私协议事件回调!");
				this.dlgPrivacyShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 引入sass样式变量(本来想全局引入，但是不成功，以后有空再解决)
	@import '@/static/scss/variables.scss';

	::v-deep .dlg-privacy-mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;

		.dlg-privacy-content-box {
			width: 66vw;
			background-color: white;
			border-radius: 1rem;
			margin-top: -10vh;
			padding: 1.3rem 2rem;

			.title {
				text-align: center;
				font-size: 1.2rem;
				margin-bottom: 0.75rem;
			}

			.content {
				font-size: 1rem;

				.link {
					color: $colorPrimaryLight;
				}
			}

			.btn {
				button {
					font-size: 0.8rem;
					height: calc(1rem + 20px);
					display: flex;
					justify-content: center;
					align-items: center;
					border: none;
					background-color: $colorPrimaryLight;
					border-radius: 0px;
					color: white;
					font-weight: bold;
					margin-top: 0.75rem;
				}
			}
		}
	}
</style>